<template>
  <div class="card">
    <div class="card-header" @click.stop="handleHeaderClick">
      <h3><i class="el-icon-date"></i> 我的日程</h3>
      <i class="el-icon-more"></i>
    </div>
    <div class="card-body">
      <div class="calendar">
        <div class="calendar-header">
          <el-button 
            type="text" 
            @click.stop="prevMonth" 
            icon="el-icon-arrow-left"
            class="month-nav"
          ></el-button>
          <h4>{{ currentYear }}年{{ currentMonth }}月</h4>
          <el-button 
            type="text" 
            @click.stop="nextMonth" 
            icon="el-icon-arrow-right"
            class="month-nav"
          ></el-button>
        </div>
        <div class="calendar-weekdays">
          <div v-for="day in weekdays" :key="day" class="weekday">{{ day }}</div>
        </div>
        <div class="calendar-days">
          <div 
            v-for="day in calendarDays" 
            :key="day.date"
            :class="[
              'day', 
              { 'today': day.isToday },
              { 'current-month': day.isCurrentMonth },
              { 'has-event': day.hasEvent }
            ]"
            @click.stop="selectDay(day)"
          >
            <span>{{ day.day }}</span>
            <div v-if="day.hasEvent" class="event-dot"></div>
          </div>
        </div>
      </div>
      <div class="schedule-list">
        <div v-if="selectedDayEvents.length > 0" class="schedule-items">
          <div 
            v-for="(event, index) in selectedDayEvents" 
            :key="index" 
            class="schedule-item"
          >
            <div class="event-time">{{ event.time }}</div>
            <div class="event-content">{{ event.content }}</div>
          </div>
        </div>
        <div v-else class="no-events">
          <i class="el-icon-info"></i>
          <span>当天没有日程安排</span>
        </div>
        <el-button 
          class="add-button" 
          type="text" 
          @click.stop="showAddScheduleDialog"
        >
          <i class="el-icon-plus"></i>
          <span>新增日程</span>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Calendar',
  data() {
    return {
      weekdays: ['日', '一', '二', '三', '四', '五', '六'],
      currentDate: new Date(),
      selectedDate: new Date(),
      events: [
        { date: '2023-05-15', time: '09:00', content: '部门周会' },
        { date: '2023-05-15', time: '14:00', content: '客户拜访' },
        { date: '2023-05-18', time: '10:30', content: '项目评审' },
        { date: '2023-05-20', time: '全天', content: '系统升级' }
      ]
    }
  },
  computed: {
    currentYear() {
      return this.currentDate.getFullYear()
    },
    currentMonth() {
      return this.currentDate.getMonth() + 1
    },
    calendarDays() {
      const year = this.currentDate.getFullYear()
      const month = this.currentDate.getMonth()
      
      const firstDay = new Date(year, month, 1)
      const lastDay = new Date(year, month + 1, 0)
      const daysInMonth = lastDay.getDate()
      const firstDayOfWeek = firstDay.getDay()
      
      const prevMonthLastDay = new Date(year, month, 0).getDate()
      const nextMonthDays = 6 - lastDay.getDay()
      
      const days = []
      
      // 上个月的日子
      for (let i = firstDayOfWeek - 1; i >= 0; i--) {
        const day = prevMonthLastDay - i
        days.push({
          day,
          date: `${year}-${month}-${day}`,
          isCurrentMonth: false,
          isToday: false,
          hasEvent: false
        })
      }
      
      // 当前月的日子
      const today = new Date()
      const todayStr = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
      
      for (let i = 1; i <= daysInMonth; i++) {
        const dateStr = `${year}-${month + 1}-${i}`
        const hasEvent = this.events.some(event => event.date === dateStr)
        days.push({
          day: i,
          date: dateStr,
          isCurrentMonth: true,
          isToday: dateStr === todayStr,
          hasEvent
        })
      }
      
      // 下个月的日子
      for (let i = 1; i <= nextMonthDays; i++) {
        days.push({
          day: i,
          date: `${year}-${month + 2}-${i}`,
          isCurrentMonth: false,
          isToday: false,
          hasEvent: false
        })
      }
      
      return days
    },
    selectedDayEvents() {
      const selectedDateStr = `${this.selectedDate.getFullYear()}-${this.selectedDate.getMonth() + 1}-${this.selectedDate.getDate()}`
      return this.events.filter(event => event.date === selectedDateStr)
    }
  },
  methods: {
    handleHeaderClick() {
      console.log('Header clicked - 触发show-detail事件')
      this.$emit('show-detail')
    },
    prevMonth() {
      this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 1, 1)
    },
    nextMonth() {
      this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 1)
    },
    selectDay(day) {
      if (day.isCurrentMonth) {
        this.selectedDate = new Date(day.date)
      } else if (day.day > 15) {
        this.prevMonth()
      } else {
        this.nextMonth()
      }
    },
    showAddScheduleDialog() {
      this.$emit('show-add-schedule')
    }
  }
}
</script>

<style scoped>
.card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;
  background: #f8f9fa;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
}

.card-header:hover {
  background-color: #f0f0f0;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
  display: flex;
  align-items: center;
  font-weight: 500;
}

.card-header h3 i {
  margin-right: 8px;
  color: #409EFF;
}

.card-body {
  padding: 16px;
}

.calendar {
  margin-bottom: 16px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.calendar-header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: normal;
  color: #333;
}

.month-nav {
  padding: 0;
  font-size: 16px;
}

.calendar-weekdays {
  display: flex;
  margin-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.weekday {
  flex: 1;
  text-align: center;
  font-size: 13px;
  color: #666;
  padding: 4px 0;
}

.calendar-days {
  display: flex;
  flex-wrap: wrap;
}

.day {
  width: 14.28%;
  height: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  cursor: pointer;
  position: relative;
  padding: 2px;
}

.day span {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.day.current-month {
  color: #333;
}

.day:not(.current-month) {
  color: #ccc;
}

.day.today span {
  background-color: #409EFF;
  color: #fff;
}

.event-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #f5222d;
  margin-top: 2px;
}

.schedule-list {
  border-top: 1px solid #f0f0f0;
  padding-top: 12px;
}

.schedule-items {
  margin-bottom: 12px;
}

.schedule-item {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px dashed #eee;
}

.event-time {
  width: 60px;
  font-size: 13px;
  color: #666;
}

.event-content {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.no-events {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  font-size: 14px;
  color: #999;
}

.no-events i {
  margin-right: 8px;
  color: #409EFF;
}

.add-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px;
  font-size: 14px;
  color: #409EFF;
}

.add-button i {
  margin-right: 6px;
}
</style>